<template>
    <div class="detail">
        <!-- 详情信息 -->
        <el-row class="detail-info">
            <el-col :span="3" class="detail-showimg">
                <div class="detail-showimg-item" :class="{'active':index == clickIndex}" v-for="(item,index) in detailData.goodsShowImg" :key="index" @click="changIndex(item,index)">
                    <img :src="item" alt="" >
                </div>
            </el-col>
            <el-col :span="9" :offset="1" class="detail-showimg-big">
                <div class="detail-showimg-big-box">
                    <img :src="imgUrl" alt="">
                </div>
            </el-col>
            <el-col :span="10" :offset="1" class="detail-info-xinxi">
                <div class="name">{{detailData.goodsname}}</div>
                <div class="goodsType">{{detailData.goodsType}}</div>
                <div class="describe-price">
                    <span class="describe">{{detailData.describe}}</span>
                    <span class="price">{{detailData.price}}元</span>
                </div>
                <div class="goodsAddress">{{detailData.goodsAddress}}</div>
                <el-input-number v-model="num" :step="1" :min="1" :max="99" step-strictly></el-input-number>
                <div>
                    <el-button type="primary" @click="addToCart()">加入购物车</el-button>
                    <el-button type="primary" @click="lijiBuy">立即购买</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 详情图片 -->
        <el-row class="detail-img">
            <el-row class="detail-title">产品信息</el-row>
            <div class="detail-img-item" v-for="(item1,index1) in detailData.goodsDetailsImg" :key="index1">
                <img :src="item1" alt="">
            </div>
        </el-row>
    </div>
</template>
<script>
import api from '@/api/commonIndex/index'
export default {
    data() {
        return {
            // 传过来的id
            id:this.$route.query.id,
            // 详情数据
            detailData:[],
            // 点击
            clickIndex:-1,
            // 大图url
            imgUrl:'',
            // 商品数量
            num:'1',
        }
    },
    computed: {
        user(){
            return this.$store.getters.user
        },
        cartGoods(){
            return this.$store.getters.cartGoods
        }
    },
    methods: {
        // 更具id得到数据
        getDetailById(){
            api.getDetailById({_id:this.id}).then((res)=>{
                if(res.code !== 200)return
                this.detailData = res.data[0]
                // 第一张
                this.imgUrl = this.detailData.goodsShowImg[0]
            })
        },
        // 改变index
        changIndex(item,index){
            this.clickIndex = index
            this.imgUrl = item
        },
        // 加入购物车
        addToCart(){
            // 这里可以选多个
            this.detailData.num = this.num
            // temp.check = false
            let temp = JSON.parse(JSON.stringify(this.detailData))
            this.$store.dispatch('setCartGoods',temp)
        },
        // 立即购买
        lijiBuy(){
            // 确认
            this.$confirm('确认提交订单吗?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.buyGoods({
                    totalPrice:this.detailData.price * this.num,
                    userID:this.user.id,
                    goodsID:this.detailData._id,
                    buyNum:this.num
                }).then(res=>{
                    if(res.code !==200 ) return
                    console.log(res)
                    this.$message.success('购买成功!')
                })
            }).catch(() => {
                        
            });
        }
    },
    created() {
        this.getDetailById()
    },
    mounted() {
        // console.log(this.id)
        $("body,html").stop().animate({
            scrollTop:0
        },0)
    },
}
</script>
<style lang="less" scoped>
.detail{
    padding: 20px 0px;
    overflow: hidden;
    .detail-info{
        padding: 50px;
        width: 1200px;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 10px;
        .detail-showimg{
            height: 100%;
            .detail-showimg-item{
                overflow: hidden;
                margin: 10px 0px;
                margin-left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 80px;
                border: 1px solid rgba(0,0,0,.06);
                border-radius: 10px;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .active{
                border: 2px solid #00e28b;
            }
        }
        .detail-showimg-big{
            height: 100%;
            position: relative;
            .detail-showimg-big-box{
                overflow: hidden;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-55%);
                height: 350px;
                width: 350px;
                img{
                    display: block;
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .detail-info-xinxi{
            height: 100%;
            padding: 80px 39px;
            div{
                margin-bottom: 15px;
            }
            .name{
                font-size: 24px;
                font-weight: 400;
            }
            .describe-price{
                color: #aca2a2;
                .describe{
                    display: inline-block;
                    width: 200px;
                }
                .price{
                    color: #d44d44;
                    font-size: 20px;
                    font-weight: 400;
                }
            }
            .goodsAddress,.goodsType{
                color: #aca2a2;
            }
            /deep/ .el-input-number__decrease:hover, /deep/ .el-input-number__increase:hover {
                color: #00e28b;
            }
            /deep/ .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), /deep/ .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
                border-color: #00e28b;
            }
            
        }
    }
    .detail-img{
        overflow: hidden;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        background-color: #fff;
        border: 1px solid #dedede;
        border-radius: 10px;
        .detail-title{
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            color: #333;
            padding-left: 30px;
            background: linear-gradient(#fbfbfb,#ececec);
            border-bottom: 1px solid #d4d4d4;
        }
        .detail-img-item{
            width: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>